投稿日: 投稿者: こばっち

ExcelをWordPressなどのwebページに表示させる方法5選

WordPressやブログに表示させる方法

 

OneDrive経由で表示する

埋め込みコードを使って表示したデータは下のようにOneDrive経由で表示例

                                                 ↓　↓　↓

OneDriveは携帯電話、タブレット、コンピューターを使えばどのデバイスからでもアクセスでき更新もできるのでとても便利です。

OneDriveはWordPressだけではなくhtml形式で記入できるblogなどのWeb Pageであれば表示可能です。

OneDriveの登録がない方は、OneDriveを無料で新規登録しましょう。

OneDriveにアクセスして｢OneDriveに移動｣します。

 

OneDriveにファイルをアップロードする

PCなどの各デバイスからアップロードする。

OneDriveからご自分がアップロードしたいフォルダをクリックして開きます。ここでは「ドキュメント」をクリックします。

 

 

次に、OneDriveからExcelのファイルをアップロードします。

画面上部にある「アップロード」をクリックし「ファイル」を選択します。

 

次にご自身がPCなどに保存している「フォルダ」から「ファイル」をクリックし表示されてる画面右下にある「開く」ボタンをクリックします。

その他にも下記の通りOneDriveにアップロードしたり、保存する方法もあります。1.Excelを保存する時にExcelの「名前を付けて保存する」の画面からOneDriveに直接保存する。

2.お使いのデバイスにOneDriveアプリがある場合は直接OneDriveに保存する。

3.お使いのデバイスからOneDriveにドラッグする。

 

OneDriveから埋め込みコードを取得する

次にアップロードしたファイル右上にある「◯をクリック」すると◯の部分にチェックマークが入りますのでその後「</>埋め込み」をクリックします。

すると、下画像のように緑点線内に埋め込みを生成する画面が表示されますので「生成」ボタンをクリックします。

 

次に、埋め込み生成されたコードをクリックすると下画面のようにコードの背景色が青色に変わります。青色に変わったのを確認し、ショートコードの「Ctrl＋C」を使ってコピーするか、埋め込みコードが書かれているところで右クリックし、表示されたメニューの中からコピーをクリックします。

 

WordPressやblogに埋め込みコードを貼り付ける

さぁ❢いよいよWordPressやblogに埋め込みコードを貼り付けます

WordPressの場合

新規で作成するなら「ダッシュボード」→「投稿」→「新規」

現在投稿及び編集しているページに追加する場合は「ダッシュボード」→投稿→「投稿一覧」の中から編集したいページの「編集」をクリックし投稿したいページを表示します。

WordPress投稿画面右上にある「テキスト」をクリックし「Ctrl＋C」で貼り付けます。

幅や高さを調整したい時は、 width=”500″ height=”400″ の数値の部分を好みの大きさになるように変更します。

 

 

blogなどのwebページの場合

投稿画面の「テキスト」や「html」のタブをクリックして埋め込みコードを貼り付ければOKです。←htmlが記入できるところ❢と覚えておくと良いでしょう。

OneDrive経由で表示する時のまとめ

1.OneDriveに表示したいファイルをアップロードするか保存する。

2.表示したいファイルの右上にある◯をクリックしチェックをONにする。

3.OneDrive上部にあるメニューバーから「</>埋め込み」をクリックし、「生成」ボタンをクリックし、コードをコピーする。

4.ブログやWebページのhtml形式ノページに貼り付ける。

 

どうでしたか？無事表示できましたか？

サーバーにアップロードする方法

 

今回は、Excelをhtml形式で保存したファイルを「ドメイン名/関数一覧表.html」というアドレスにアクセスしてExcelを表示させる方法をご紹介します。

2018/5/22追記します。
Search Console モバイルフレンドリーテストでこのページはモバイル フレンドリーではありませんと怒られてしまったので、ファイルの横幅を短くし修正したものに変更しましたので現在のアドレスは「ドメイン名/excel1.html」になっています。

 

実際の表示例

↓　↓

　←画像にリンクして表示　したり、

関数一覧表　←文字にリンクをして表示ができます。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。

それでき、まず・・・

Xサーバーのログインからファイルマネジャーをクリックします。

次にユーザー名とパスワードを入力しログインをクリックします。

するとドメインを登録しているファイルが一覧で表示されますので、アップロードするドメインのファイルをクリックします。

するとxsever WebFTP というページが開き、ドメインをとったファイル名が表示されます。

 

 

すると下の画像のようにファイルの中にpubric.htmlというファイルがあります。

これがWordPressがインストールされているファイルになりますので「pubric.html」をクリックします。

 

次に表示された画面の右上にパス名が「ドメイン名pubric_html」となっているのが確認できると思います。

次にファイル選択をクリックします。

 

すると一覧で表示されるのでアップロードするファイルをクリッします。

今回アップロードするのは「関数一覧表」ですので

「 関数一覧表.html」をクリックします。

 

すると下の画像のようにファイルを選択の横に関数一覧.htmlと表示されているのが分かると思います。

次に、このファイルを保存した時文字コードを「UTF-8」で保存していますので文字コードを「UTF-8」にします。その後「アップロード」のボタンをクリックします。

これでサーバーにアップロードが完了できました。

後は、WordPressなどの投稿記事に画像や文字を入力しリンクを「ドメイン名/ファイル名」に設定すればOKです。

 

もし、下の画像のようにExcelをwebページとして保存した時にfilesのフォルダーとhtmlのファイルが同時にできた場合は、xサーバーのpubric_htmlの中に(pubric_htmlを開いた状態で)

1.「Excelデータベース関数・・・・files」の名前のファルダを作ります。

2.作ったfileフォルダの中にpcなどのデバイスからフォルダの中身を全てアップロードします。

3.htmlファイルは、pubric_htmlを開いた状態でアップロードします。

4.関連付けるリンクは「ドメイン名.com/Excel・・・・.html」ファイル名にします。

参考例・・・私のドメインはhttps://暮らしのハンドノート.comですので、下の画像をそままアップロードした場合は、「https://暮らしのハンドノート.com/Excelデータベース関数バージョン適用対象表.html」となりこれをリンク先に設定します。

 

補足:Excelを「.xls」や「.xlsx」のファイル形式のままアップロードするには、XサーバーでMINE設定をする必要があります。

Windows Server 2003 Service Pack 2 (SP2) 以降のバージョンでは自動的に登録されますがXサーバーはLinuxの為xサーバーのMINE設定が必要になります。

MIne設定をすることによりサーバー側で新しいファイル形式が認識されるようになります。

MINE設定とは、インターネットで使用される拡張子とファイルの種類を関連づけるもので、サーバーとファイルを関連付ける役目を果たします。

MINEタイプを設定する場合はご参考に❢

↓　　↓　　↓

MINEタイプ 拡張子 アプリケーション
application/msword .doc Microsoft Word2003以前
application/vnd.ms-excel .xls Microsoft Excel2003以前
application/vnd.ms-powerpoint .ppt Microsoft Powerpoint2003以前
application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx Microsoft Word2007以降
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx Microsoft Excel2007以降
application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx Microsoft Powerpoint2007以降

 

WordPressの投稿記事に表示させる方法

WordPressのメディアにアップロードする方法

表示方法は、サーバーにアップロードした時と同じになりますが、これはかなり簡単です。

出来上がりの表示はこんな感じです。

↓　↓　↓

 ←エクセルの画像をupし画像にリンク先を設定しています

データベース関数適応対象表 ←文字を入力しリンク先を設定しています。

 

まず、wordPressの「ダッシュボード」→「メディア」→「新規追加」の順にクリックすると「ドロップするかファイルを選択する」ようになってますので今回は複数のファイルをまとめてアップロードしたいので、「ドロップ」します。

アップロードするファイルは、filesのフォルダの中の3つのファイルと

 アイコンの付いたhtmlファイル1つです。

まずフォルダをダブルクリックして、開きます。

すると下のようなファイルがありますので「.xml」以外のファイルを全て選択し、WordPressにアップロードします。

次に アイコンが付いたhtmlのファイルもアップロードします。

これで必要なファイルはアップロードできましたので

WordPressのダッシュボードに戻り「メディアファイル」→「ライブラリ」の順にクリックすると最後にアップロードした  アイコンのファイルが変わり<>表示されていますので「編集」をクリックします。

すると、アップロードしたファィルのURLが下の画像のように表示されますので、このURLをコピーし投稿記事のリンク先に設定します。

 

どうでしたか？案外簡単でしょ(*^^*)

 

WordPressの1記事にcssを適応させ記途する方法2選

投稿記事のみに全てのソースコードをコピペして投稿する

この記事を使った場合は下の表のようになりますがCSSを<style>~</style>で囲ってhtmlの中に入力しているので、どうやら非推進のようです。
↓↓↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNT ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNTA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DGET ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DMAX ○ ○ ○ ○ ○ ○ ○ ○ ○
DMIN ○ ○ ○ ○ ○ ○ ○ ○ ○
DPRODUCT ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEV ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEVP ○ ○ ○ ○ ○ ○ ○ ○ ○
DSUM ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DVAR ○ ○ ○ ○ ○ ○ ○ ○ ○
DVARP ○ ○ ○ ○ ○ ○ ○ ○ ○
GETPIVOTDATA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

この表示方法は前回投稿していますのでご覧になってください。

↓　↓　↓

 

初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法


WordPressのカスタムフィールドを使用し投稿する方法

以前プラグインのSimple Custom CSSを使用していて、cssの反映が上手くできなかったこともあり、Excelのcssを反映させるたびに追加cssなどを使っても・・と思い個別にcssが設定できないか検索してたところNaifixさんの「WordPressで記事ごとに個別のCSSを設定する方法3選」という記事に出会いました。

その記事の中からプラグインを使わずカスタムフィールドを利用する方法をそのまま使わさせて頂きました。Naifixさんありがとうございます＼(^o^)／

header.php に追記する

header.php に書かれている <head> ～ </head> に以下のコードを追記します。

コードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものだそうです。

2021.1.23追記します。
header.phpの上記コードに修正点がありました。
コードは以下のコードを参照してください。

詳しくはこちらで説明しています
↓　　　　　↓

WordPressで「Warning: Use of undefined constant article_css – assumed ‘article_css’」と表示された際の対処方法

カスタムフィールドを表示する

WordPressの「投稿」画面上に表示されている「表示オプション」をクリックし、「カスタムフィールド」にチェックをいれます。

すると投稿画面下にカスタムフィールドが使用できるようになっていますので「新規追加」をクリックします。

次に名前の欄に「article_css」と入力し、値の欄にCSSを入力する準備ができましたので次はCSSをこの値の欄に入れる為の準備をします。

※Excelの詳しい保存方法は、前回の記事「初心者でも簡単Excelの表を色付けしたままWordPressの記事に投稿する方法」の「2.Excelファイルをhtml形式にして保存する」で説明していますのでご覧になってください。

 

cssとhtmlの整理をする

まず、webページしとて保存したfilesフォルダを開くと4つのファイルができています。今から使うのは「sheet001.html」と「stylesheet.css」のファイルです。

『sheet001.html』のファイルをダブルクリックで開くとwebページが開きますのでwebページ上で「右クリック」し、「フレームのソースを表示」をクリックします。

下の画像のようにこのフレームのソースが表示されますのでショートカットキーの「Ctrl＋A」で全て選択し「Ctrl＋C」でコピーします。

このソースをWordPressの画面に戻り投稿記事の「テキスト」に全て貼り付けます。

※TeraPadやメモ帳などに貼り付けて必要なソースだけをWordPressに貼り付けてもいいでしょう。

次に、少し下の方にいくと、</style>があります。その直前に「－－＞」がありましたらこの前にカーソルをあわせて不足しているCSSのコードを貼れる準備をします。

</style>はCSSコードの終わを示します。

 

次に、filesフォルダの中にある「stylesheet.css」のファイルをダブルクリックで開きます。

するとメモ帳などで開かれますので、これもショートカットキーの「Ctrl＋A」で全て選択し「Ctrl＋C」でコピーします。

次にWordPressの投稿画面に戻り下画面の位置「－－＞」の直前にカーソルをあわせた状態でCSSをショートコードの「Ctrl＋V」で貼り付けます。

 

Excelのcssをカスタムフィールドにコピペする

CSSとして必要なのは<style>~</style>の間です。

先程wordpressの投稿記事に貼り付けた中からこの部分を切り取りカスタムフィールドに貼り付けます。

現在wordpressの投稿記事にあるのは下記コードですね。

CSSとして必要なのは、このコードの中で14~274行目になります。

では、必要なコードをコピーし、切り取りしカスタムフィールドに貼り付けしてみましょう。

スカタムフィードに貼り付けるのは上記コードの中から<table~</table>までのコードなので、下記コードですね。

カスタムフィールドの「値」の欄に貼り付けが終わりましたら、「カスタムフィールドを追加」ボタンをクリックします。

これでCSSの入力は完了です。

WordPressの投稿記事に残っているコード内で不要なコードを削除する

それでは不要なコードを削除していきましょう。

Excelの表を記載するので、htmlとして必要なのは、基本的に<table>~</table>までなのですが、その中でも不要なコードがあります。

から始まっているコードで「サポートされていない場合は次の処理をしなさい!という条件式」です。

調べてみたところJavaScriptを使用したdisplayのコードでhtmlには不要なコードなので下記条件式のコードは削除します。

次に不要なコードは、一番上の

から始まり

で終わる間までの下記コードですので、このコードも削除します。

残りは、一番最後の</body>と</html>ですのでこのコードも削除します。

※<html と<body で始まるソースは削除してますので終わりの</html>と</body>も不用です。

後残ったコードは<table ~</table>までの下記コードですね。

 

すると下表のように表示されます。

↓　↓　↓

関数名 Windows版 Mac版 Online iPad iPhone Android Mobile Starter 2010
2016 2013 2010 2007 2003 2016 2011
DAVERAGE ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNT ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DCOUNTA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DGET ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DMAX ○ ○ ○ ○ ○ ○ ○ ○ ○
DMIN ○ ○ ○ ○ ○ ○ ○ ○ ○
DPRODUCT ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEV ○ ○ ○ ○ ○ ○ ○ ○ ○
DSTDEVP ○ ○ ○ ○ ○ ○ ○ ○ ○
DSUM ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○
DVAR ○ ○ ○ ○ ○ ○ ○ ○ ○
DVARP ○ ○ ○ ○ ○ ○ ○ ○ ○
GETPIVOTDATA ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

どうでしたか？カスタムフィールドからCSSが設定できれば、個別に記事のスカタマイズもできるので便利ですね。

この記事が参考になったという方はポチッと応援お願いします。

↓　　　↓

にほんブログ村 IT技術ブログ WordPressへ

関連記事

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）